<template>
    <div class="SingerListItem">
        <div class="SingerListItem_box">
            <div class="background">
                <div class="shadow"></div>
                <div class="gradient"></div>
            </div>
            <div class="SingerListItem">
                <!-- 左盒 -->
                <div class="letf_box">
                    <!-- 封面 -->
                    <div
                        class="cover"
                        :style="{
                            backgroundImage: `url(${v.picUrl})`,
                        }"
                        @click="go"
                    ></div>
                    <div class="cover_behind"></div>
                    <div class="shadow"></div>
                </div>
                <!-- 右盒 -->
                <div class="right_box">
                    <!-- 歌手名字 -->
                    <div class="name">{{ v.name }}</div>
                    <!-- 别名  -->
                    <div class="trans">{{ v.alias }}</div>

                    <!-- 数量盒 -->
                    <div class="size_box">
                        <!-- 人气专辑数量 -->
                        <div class="albumSize">人气专辑: {{ v.albumSize }}</div>

                        <!-- 歌曲数量 -->
                        <div class="musicSize">歌曲: {{ v.musicSize }}</div>
                    </div>

                    <!-- 粉丝数量 -->
                    <div class="fansCount" v-if="v.fansCount">
                        {{ v.fansCount | playCount_kw }} 粉丝
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "SingerListItem",
    props: {
        v: {
            type: Object,
            default() {
                return {};
            },
        }
    },
    methods: {
        // 触发跳转到 歌手详情
        go() {
            this.$emit('go');
        }
    },
    filters: {
        // 千分位
        playCount_kw: (value) => {
            let b = String(value).split("");
            let c = b.length;
            for (let i = c - 3; i > 0; i -= 3) { b.splice(i, 0, ","); }
            return b.join("");
        }
    },

    created() {
        // console.log("🚀 ==> created ==> this.v", this.v);
    },
}
</script>

<style lang="less" scoped>
.SingerListItem {
    // 列表元素盒子
    .SingerListItem_box {
        position: relative;
        margin: 0 10px;
        margin-bottom: 38px;

        // 背景盒
        .background {
            border-radius: 10px;
            width: 100%;
            height: 100%;
            display: flex;
            position: absolute;
            top: 5px;
            left: 5px;
            // z-index: 5;
            // flex-direction: row-reverse;

            // 阴影盒
            .shadow {
                width: 100%;
                height: 100%;
                background-color: #fff;
                opacity: 0.24;
                filter: blur(4px);
                transform: translateY(5px);
                border-radius: 10px;
            }
            // 渐变色盒
            .gradient {
                border-radius: 10px;
                position: absolute;
                right: 0;
                top: 0;
                width: 50%;
                height: 100%;
                background-image: linear-gradient(0deg, #e500ff, #0268f3);
            }
        }

        // 列表元素
        .SingerListItem {
            border-radius: 10px;
            background-color: #1e1e1e;
            display: flex;
            position: relative;

            // 左盒
            .letf_box {
                position: relative;
                // 封面
                .cover {
                    position: relative;
                    width: 130px;
                    height: 85px;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center center;
                    border-radius: 10px;
                    top: -7px;
                    left: -7px;
                    z-index: 5;
                }
                // 封面低图
                .cover_behind {
                    position: absolute;
                    width: 130px;
                    height: 85px;
                    background-image: url('../assets/singer.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center center;
                    border-radius: 10px;
                    top: -7px;
                    left: -7px;
                    z-index: 4;
                }

                // 阴影
                .shadow {
                    position: absolute;
                    width: 130px;
                    height: 90px;
                    z-index: 3;
                    top: -7px;
                    left: -2px;
                    background: conic-gradient(
                        #e652d8 20%,
                        #02f02b 30%,
                        #ca02e0 38%
                    );
                    opacity: 0.45;
                    filter: blur(5px);
                }
            }
            // 右盒
            .right_box {
                position: relative;
                flex: 1;
                margin-left: 7px;
                // 歌手名
                .name {
                    color: #fff;
                    margin: 15px 0 5px 5px;
                    font-size: 16px;
                    line-height: 16px;
                }
                // 别名
                .trans {
                    min-height: 3px;
                    align-items: center;
                    display: flex;
                    margin-left: 15px;
                    margin-bottom: 15px;color: #969799;
                }
                // 数量盒
                .size_box {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    color: #969799;
                    // 人气专辑数量
                    // .albumSize {
                    // }
                    // 歌曲数量
                    .musicSize {
                        margin-right: 5px;
                    }
                }

                // 粉丝数量
                .fansCount {
                    color: #fff;
                    opacity: 0.7;
                    position: absolute;
                    top: 10px;
                    right: 8px;
                }
            }
        }
    }
}
</style>